<template>
  <div id="supervisionInformationDetail" v-loading="mainLoading" class="app-container">
    <div class="mainBox"> 
      <div class="leftBox">
        <div class="leftBox_title">
          {{type==1?'施工前块信息':type==2?'施工中块信息':type==3?'施工后块信息':'监理片块信息'}}
        </div>
        <div class="leftBox_title_sub">
          <div class="leftBox_title_sub_piankuai leftBox_title_sub_text"><span>片块名：</span>{{pageData.landName}}</div>
        </div>
        <div class="leftBox_title_sub">
          <div class="leftBox_title_sub_piankuai leftBox_title_sub_text"><span>{{type==4?'监理时间':'施工时间'}}：</span>{{type==4?pageData.time:sgqTime}}</div>
          <div class="leftBox_title_sub_piankuai leftBox_title_sub_text"><span>{{type==4?'监理位置':'施工位置'}}：</span>{{type==4?pageData.place:sgqPlace}}</div>
        </div>
        <div class="leftBox_title_sub" v-if="type==2 || type==4">
          <p>{{type==2?'施工日志描述':'监管日志描述'}}：</p>
          <p>{{sgzLgit}}</p>
        </div>
        <div class="leftBox_line"></div>
        <div class="fujianBox">
          
          <div class="fujianList" v-if="imgArr.length!=0&&(type==1 || type==3)">
            <div class="fujianList_item" v-for="(item,index) in imgArr" :key="index">
              <div class="fujianList_item_left">{{item.name}}</div>
              <div class="fujianList_item_right" @click="btnSeeImg(item)">查看</div>
            </div>
          </div>
          <div class="fujianList" v-if="imgArrOrVcr.length!=0&&type==2">
            <div class="fujianList_item" v-for="(item,index) in imgArrOrVcr" :key="index">
              <div class="fujianList_item_left">{{item.name}}</div>
              <div class="fujianList_item_right" @click="btnSeeImg(item)">查看</div>
            </div>
          </div>
          <div class="fujianList" v-if="jianliDetailList.length!=0&&type==4">
            <div class="fujianList_item" v-for="(item,index) in jianliDetailList" :key="index">
              <div class="fujianList_item_left">{{item.name}}</div>
              <div class="fujianList_item_right" @click="btnSeeImg(item)">查看</div>
            </div>
          </div>
          <!-- <div class="fujianList fujianNoData" v-else>
            暂无数据
          </div> -->
        </div>
      </div>
      <div class="rightBox">
        <tdMap :zhjgList="zhjgList" class="mapBox_right" ref="tdMap" :pkList="mainDataData" :isShowControls="false" />
      </div>
    </div>
    <!-- <div class="boxTitle">
      <div class="boxTitle_title">{{pageData.landName}}</div> 
      <div class="boxTitle_time" v-show="type==1 || type==2 || type==3">
        
        <span>施工时间：{{sgqTime}}</span>
        <span>施工位置：{{sgqPlace}}</span>  
      </div> 
      <div class="boxTitle_time" v-show="type==4">
        
        <span>监理时间：{{pageData.time}}</span>
        <span>监理位置：{{pageData.place}}</span>  
      </div> 
      <div class="title_little">
          
      </div>
      
    </div>
    <div class="boxItem"  v-show="type==2 || type==4">
      <div class="boxItem_title">
        <span class="tit" v-show="type==2">施工日志描述</span>
        <span class="tit" v-show="type==4">监管日志描述</span>
      </div>
      <div class="boxItem_content" style="margin-top:20px">
        <el-input
            type="textarea"
            :rows="5"
            readonly
            resize='none'
            v-model="sgzLgit"
            >
          </el-input>
      </div>
    </div>
    <div class="boxItem">
      <div class="boxItem_title">
        <span class="tit" v-show="type==1 || type==2 || type==3">施工位置信息</span>
        <span class="tit" v-show="type==4">监理位置信息</span>
      </div>
      <div class="boxItem_content">
        <tdMap style="height: 600px" class="mapBox_right" ref="tdMap" :pkList="mainDataData" :isShowControls="false" />
      </div>
    </div>

    
    
    <div class="boxItem">
      <div class="boxItem_title">
        <span class="tit" v-show="type==1 || type==2 || type==3">施工现场多媒体资料</span>
        <span class="tit" v-show="type==4">监理现场多媒体资料</span>
      </div>
      <div class="boxItem_content" style="padding-top:30px;">
        
        <el-table :data="imgArr" border style="width: 100%"  v-if="type==1 || type==3">
            <el-table-column type="index" show-overflow-tooltip label="序号" width="60"></el-table-column>
              <el-table-column prop="name" label="类型"  width="200"></el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" type="primary"  fixed="left" @click="btnSeeImg(scope.row)">查看</el-button>
                  </template>
              </el-table-column>
          </el-table>
           <el-table :data="imgArrOrVcr" border style="width: 100%"  v-if="type==2">
            <el-table-column type="index" show-overflow-tooltip label="序号" width="60"></el-table-column>
              <el-table-column prop="name" label="类型"  width="200"></el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" type="primary"  fixed="left" @click="btnSeeImg(scope.row)">查看</el-button>
                  </template>
              </el-table-column>
          </el-table>
          <el-table :data="jianliDetailList" border style="width: 100%" v-if="type==4">
       
            <el-table-column type="index" show-overflow-tooltip label="序号" width="60"></el-table-column>
              <el-table-column prop="name" label="类型"  width="200"></el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" type="primary"  fixed="left" @click="btnSeeImg(scope.row)">查看</el-button>
                  </template>
              </el-table-column>
          </el-table>
      </div>
    </div> -->
    
    <el-dialog :close-on-click-modal="false" :title="title" :before-close="handleClose" :visible.sync="seeImgDialog" width="50%">
      <div class="seeImg"  v-if="type==2">
        <div class="imgBox" style="width:500px;height:500px;margin:0 auto;" v-if="showImgType==1">
          <img style="width:100%;height:100%;" :src="$https+path" alt="">
        </div>
        <div class="imgBox" style="width:700px;height:400px;margin:0 auto;" v-if="showImgType==2">
          <video id="showVedio" controls style="width:100%;height:100%;" :src="$https+path"></video>
        </div>
      </div>
      <div class="seeImg"  v-if="type==1||type==3||type==4">
        <img :src="$https+path" width="80%" height="500">
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { earlyEnterpriseCheck,earlyEnterpriseCheckQianqi,supervisingCheck } from "@/api/earlyStageAchievementRecheck";;
// import { getLandStatusMapAuditInfo } from "@/api/siteSurveyEarlyStage";

import { jgfsZhkgxx } from "@/api/jungongcehuiResultFuShen";
import { getLandStatusMapAuditInfo } from "@/api/jjgc";
import {
  shigongInfo,jianliInfo,jianliDetailInfo,shigongzhongInfo,
  shigongAfterDetail,shigongBeforeDetail,constructingSuperviseInfo,constructingLaterSupervisingInfo,constructingConstructSupervisingCheck
} from "@/api/projectImplementation";
import mapInit from "@/api/mapConfig";
import tdMap from "@/components/tdMap";
import {selectErlyMultiPolygon} from "@/api/common";
export default {
  components: {
    tdMap
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      //综合监管信息附件类型切换
      fujianType:1,
      title: "查看图片",
      path:'',
      imgSrc: "",
      imgShow: false,
      mainLoading: false,
      activeName: "1",
      list: [],
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        projectId: 27,
        landId: "",
        applicantName: "",
        startTime: "",
        endTime: ""
      },
      total: 0, //总数
      landId: "", //片块ID
      mainData: "",
      typeText: "现场勘查",
      checked: true,
      checked1: true,
      checked2: true,
      checked3: true,
      checked4: true,
      checked5: true,
      nowType: 1,

      pageData: {
        landName: "",
        time: "",
        coorDonate: "",
        place:''
      },
      showImgType: "", //区别视频或者图片 1 图片 2 视频

      mainDataData: [],
      imgArr:[],
      imgArrOrVcr:[], //施工中图片视频列表
      jianliDetailList:[],//监理详情

      seeImgDialog:false,

      sgqTime:'',
      sgqPlace:'',
      type:'',//1施工前，2施工中，3施工后，4监理
      photo:'',
      vcr:'',
      sgzLgit:'',
      zhjgList:[],
    };
  },
  created() {
    this.zhjgList.push(JSON.parse(localStorage.getItem("zongheItem")))
    //初始化赋值
    console.log(this.$route.query,'this.$$route.query')
    // this.pkInfo = this.$route.query.rows;
    this.pageData.landName = this.$route.query.landName;
    this.type=this.$route.query.type
    this.photo=this.$route.query.photo
    this.vcr=this.$route.query.vcr
    this.pageData.time = this.$route.query.time;
    this.pageData.place=this.$route.query.place
    this.sgqTime=this.$route.query.sgqTime
    this.sgqPlace=this.$route.query.sgqPlace
    this.sgzLgit=this.$route.query.sgzLgit
    // if (this.$route.query.coorDonate) {
    //   this.pageData.coorDonate = this.$route.query.coorDonate;

    //   var arr = [];
    //   var subArr = this.$route.query.coorDonate.split(",");
    //   arr.push(subArr);
    //   this.mainData.coorDonate = arr;
    // }

    // console.log(this.mainData, "this.mainData");
    this.landId = this.$route.query.id;
    this.getData()
    this.getLandId()
  },
  methods: {
    //切换附件类型事件
    changeFujianType(type){
      this.fujianType=type
    },
    btnSeeImg(row){
      this.title=row.name
      this.path=row.path
      if(row.type){
        this.showImgType=row.type
        if(row.type==2){
          this.$nextTick(()=>{
            var vedio=document.getElementById("showVedio")
            console.log(vedio,"vedioData")
            vedio.play()
          })
        }
      }
      this.seeImgDialog=true
    },
    getLandId(){
      let obj={
        landId:this.landId
      }
      selectErlyMultiPolygon(obj).then(res=>{
          let obj = res.data;
          let array = [];
          array.push(obj);
          this.mainDataData = array;
        })
    },
    getData(){
      if(this.type==1 || this.type==3){
        let obj={
          landId:this.landId
        }
        
        shigongBeforeDetail(obj).then(res=>{
          console.log(res,'施工前or施工后')
            if(this.type==1){
              if(res.data!=null){
                // this.mainDataData=res.data
                this.shigongBefore=res.data
                let arr=[]
                if(res.data.sgqPhoto1Path!=null || res.data.sgqPhoto1Path!=''){
                  var index=res.data.sgqPhoto1Path.indexOf(".")
                  var sgqPhoto1PathType=res.data.sgqPhoto1Path.substring(index,res.data.sgqPhoto1Path.length) 
                  arr.push({name:'西北方位照片'+sgqPhoto1PathType,path:res.data.sgqPhoto1Path})
                }
                if(res.data.sgqPhoto2Path!=null||res.data.sgqPhoto2Path!=''){
                  var index=res.data.sgqPhoto2Path.indexOf(".")
                  var sgqPhoto2PathType=res.data.sgqPhoto2Path.substring(index,res.data.sgqPhoto2Path.length) 
                  arr.push({name:'东北方位照片'+sgqPhoto2PathType,path:res.data.sgqPhoto2Path})
                }
                if(res.data.sgqPhoto3Path!=null||res.data.sgqPhoto3Path!=''){
                  var index=res.data.sgqPhoto3Path.indexOf(".")
                  var sgqPhoto3PathType=res.data.sgqPhoto3Path.substring(index,res.data.sgqPhoto3Path.length) 
                  arr.push({name:'东南方位照片'+sgqPhoto3PathType,path:res.data.sgqPhoto3Path})
                }
                if(res.data.sgqPhoto4Path!=null||res.data.sgqPhoto4Path!=''){
                  var index=res.data.sgqPhoto4Path.indexOf(".")
                  var sgqPhoto4PathType=res.data.sgqPhoto4Path.substring(index,res.data.sgqPhoto4Path.length) 
                  arr.push({name:'西南方位照片'+sgqPhoto4PathType,path:res.data.sgqPhoto4Path})
                }
                if(res.data.sgqProspectPath!=null||res.data.sgqProspectPath!=''){
                  var index=res.data.sgqProspectPath.indexOf(".")
                  var sgqProspectPathType=res.data.sgqProspectPath.substring(index,res.data.sgqProspectPath.length) 
                  arr.push({name:'360度全景照片'+sgqProspectPathType,path:res.data.sgqProspectPath})
                }
                
                this.imgArr=arr
                
              }
            }else if(this.type==3){
              if(res.data!=null){
                this.mainDataData=res.data
                this.shigongAfer=res.data
                let arr=[]
                if(res.data.sghPhoto1Path!=null || res.data.sghPhoto1Path!=''){
                  var index=res.data.sghPhoto1Path.indexOf(".")
                  var sghPhoto1PathType=res.data.sghPhoto1Path.substring(index,res.data.sghPhoto1Path.length) 
                  arr.push({name:'西北方位照片'+sghPhoto1PathType,path:res.data.sghPhoto1Path})
                }
                if(res.data.sghPhoto2Path!=null||res.data.sghPhoto2Path!=''){
                  var index=res.data.sghPhoto2Path.indexOf(".")
                  var sghPhoto2PathType=res.data.sghPhoto2Path.substring(index,res.data.sghPhoto2Path.length) 
                  arr.push({name:'东北方位照片'+sghPhoto2PathType,path:res.data.sghPhoto2Path})
                }
                if(res.data.sgqPhoto3Path!=null||res.data.sgqPhoto3Path!=''){
                  var index=res.data.sgqPhoto3Path.indexOf(".")
                  var sgqPhoto3PathType=res.data.sgqPhoto3Path.substring(index,res.data.sgqPhoto3Path.length) 
                  arr.push({name:'东南方位照片'+sgqPhoto3PathType,path:res.data.sgqPhoto3Path})
                }
                if(res.data.sghPhoto4Path!=null||res.data.sghPhoto4Path!=''){
                  var index=res.data.sghPhoto4Path.indexOf(".")
                  var sghPhoto4PathType=res.data.sghPhoto4Path.substring(index,res.data.sghPhoto4Path.length) 
                  arr.push({name:'西南方位照片'+sghPhoto4PathType,path:res.data.sghPhoto4Path})
                }
                if(res.data.sgqProspectPath!=null||res.data.sgqProspectPath!=''){
                  var index=res.data.sgqProspectPath.indexOf(".")
                  var sgqProspectPathType=res.data.sgqProspectPath.substring(index,res.data.sgqProspectPath.length) 
                  arr.push({name:'360度全景照片'+sgqProspectPathType,path:res.data.sgqProspectPath})
                }
                
                this.imgArr=arr
               
              }
            }
        })
      }else if(this.type==2){
        let obj={
          page:1,
          size:99999,
          photo:this.photo?this.photo:'',
          vcr:this.vcr?this.vcr:''         
        }
        constructingConstructSupervisingCheck(obj).then(res=>{
          console.log(res,'施工中')
          if(res.data!=null){
            this.mainDataData=res.data
            this.shigongZhong=res.data
            var imageGeShi=["bmp","pcx","png","jpg","jpeg","gif","tiff"]
            var videoGeShi=["mp4","avi","flv","rmvb","mkv","gif","mov","rm","3gp"]
            var mainList=[]
            var mainList1=[]
            res.data.rows.forEach((item,index)=>{
              imageGeShi.forEach(item1=>{
                if(item.fileKey.substring(item.fileKey.indexOf('.')+1,item.fileKey.length)==item1){
                  var index=item.fileKey.indexOf(".")
                  var photoType=item.fileKey.substring(index,item.fileKey.length) 
                  mainList.push({name:'施工后图片',path:item.filePath,type:1,flieType:photoType})
                }
              })
            })
            res.data.rows.forEach((item,index)=>{
              videoGeShi.forEach(item1=>{
                if(item.fileKey.substring(item.fileKey.indexOf('.')+1,item.fileKey.length)==item1){
                  var index=item.fileKey.indexOf(".")
                  var vedioType=item.fileKey.substring(index,item.fileKey.length) 
                  mainList1.push({name:'施工后视频',path:item.filePath,type:2,flieType:vedioType})
                }
              })
            })
            //名称处理
            mainList.forEach((item,index)=>{
              item.name=item.name+(index!=0?index:'')+item.flieType
            })
            mainList1.forEach((item,index)=>{
              item.name=item.name+(index!=0?index:'')+item.flieType
            })

            this.imgArrOrVcr=mainList.concat(mainList1)
          }
        })
      }else if(this.type==4){
        let obj={
        page:1,
        size:20,
        landId:this.landId
      }
      jianliDetailInfo(obj).then(res=>{
        console.log(res,'res')
        let arr=res.data
          res.data.rows.forEach((item,index) => {
            this.jianliDetailList.push({
              name:'现场监理照片'+(index+1),
              path:item
            })
          });
      })
      }
    },
    handleClose(){
      this.seeImgDialog=false
      if(this.showImgType==2){
        var vedio=document.getElementById("showVedio")
        vedio.currentTime = 0
        vedio.pause()
      } 
      
    },
  }
};
</script>
<style lang="scss" scoped>
p{
  margin: 0;
}
#supervisionInformationDetail {
  padding: 30px 40px;
  box-sizing: border-box;
  
}
#supervisionInformationDetail .boxItem {
  width: 100%;
  background-color: #fff;
}
#supervisionInformationDetail .boxItem_title {
  width: 100%;
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  font-size: 14px;
  color: #48494d;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}
#supervisionInformationDetail .boxItem_content {
  width: 100%;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}
#supervisionInformationDetail .boxItem_content_row {
  display: flex;
  align-items: center;
}
#supervisionInformationDetail .boxItem_content_row_item {
  display: flex;
  align-items: center;
}
#supervisionInformationDetail .boxItem_content_row_item {
  margin-right: 30px;
}
#supervisionInformationDetail .boxItem_content_row_item p {
  font-size: 14px;
  line-height: 36px;
}
#supervisionInformationDetail .boxItem_content_row_item p:first-child {
  color: #444;
  font-weight: bold;
}
#supervisionInformationDetail .boxItem_content_row_item p:last-child {
  color: #666;
}
#supervisionInformationDetail .uploadDownLoadBox_item p {
  width: 140px;
}
#supervisionInformationDetail .button_box {
  margin-top: 30px;
}
#supervisionInformationDetail .button_box_item {
  margin-right: 10px;
}
#supervisionInformationDetail .errorBox /deep/ .el-dialog {
  width: 800px;
}
#supervisionInformationDetail .piankuaixinxi .title {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  border: 1px solid #ebeef5;
  border-bottom: none;
  border-top: none;
}
#supervisionInformationDetail .piankuaixinxi .title1 {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  border: 1px solid #ebeef5;
  border-bottom: none;
}
#supervisionInformationDetail .boxTitle {
  margin-bottom: 30px;
}
#supervisionInformationDetail .boxTitle .boxTitle_title {
  font-size: 20px;
  font-weight: bold;
  color: #444;
  text-align: center;
}
#supervisionInformationDetail .boxTitle_time {
  font-size: 14px;
  color: #999;
  margin-top: 20px;
  margin-bottom: 30px;
}
#supervisionInformationDetail .boxTitle_time span{
  margin-right:20px; 
}
#supervisionInformationDetail .checkOut_item {
  margin-bottom: 10px;
}
#supervisionInformationDetail
  /deep/
  .el-checkbox__input.is-disabled
  + span.el-checkbox__label {
  border-color: #409eff;
}
#supervisionInformationDetail
  /deep/
  .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner {
  border-color: #409eff;
  background-color: #409eff;
}
#supervisionInformationDetail
  /deep/
  .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner::after {
  border-color: #fff;
}
#supervisionInformationDetail
  /deep/
  .el-checkbox__input.is-disabled
  + span.el-checkbox__label {
  color: #12203e;
}
#supervisionInformationDetail .imgDaolig /deep/ .el-dialog {
  width: 800px;
}

.title_one {
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: #444;
  font-weight: bold;
}
.title_little {
  font-size: 13px;
  color: #999;
  margin: 40px 20px 20px 30px;
}
.title .title_little span {
  margin-right: 30px;
}

.mainBox{
  width: 100%;
  display: flex;
  height: calc(100vh - 174px);
}
.leftBox{
  width: 30%;
  margin-right: 5%;
}
.leftBox_title{
  color: #4D4D4D;
  font-size:18px;
  font-weight:bold;
  line-height:25px;
}
.leftBox_title_sub{
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.leftBox_title_sub .leftBox_title_sub_piankuai{
  margin-right: 40px;
}
.leftBox_title_sub .leftBox_title_sub_text{
  color: #595959;
  font-size: 14px;
}
.leftBox_title_sub_text span{
  color: #737373;
}
.leftBox_line{
  /* width:80%; */
  height:1px;
  background:rgba(235,238,245,1);
  opacity:1;
  margin-top: 30px;
  margin-bottom: 14px;
}
.fujianBox_tabs{
  display: flex;
  align-items: center;
}
.fujianBox_tabs_item{
  width:60px;
  height:28px;
  background:#F0F3F5;
  opacity:1;
  border-radius:2px;
  color: #696969;
  font-size: 14px;
  margin-right: 8px;
  text-align: center;
  line-height: 28px;
  cursor: pointer;
}
.fujianBox_tabs_item.on{
  background:#409EFF;
  color: #fff;
}
.fujianList{
  /* width: 70%; */
  margin-top: 14px;
}
.fujianList_item{
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 56px;
  line-height: 56px;
}
.fujianList_item .fujianList_item_left{
  color: #606266;
  font-size: 14px;
}
.fujianList_item .fujianList_item_right{
  color: #409EFF;
  font-size: 14px;
  cursor: pointer;
}
.rightBox{
  width: 70%;
}
.fujianNoData{
  text-align: center;
  margin-top: 50px;
  letter-spacing: 8px;
  color: #696969;
}
.leftBox_title_sub p{
  font-size: 13px;
  margin-top: 20px;
}
.leftBox_title_sub p:first-child{
  width: 160px;
  color: #737373;
}
.leftBox_title_sub p:last-child{
  width: 50%;
  word-wrap:break-word;
}
</style>
